<template>
  <div class="aui-wrapper aui-page__login">
      <div class="box">
          <div class="logo">
              <img src="~@/assets/img/neiwangsaas/logo.png" alt="">
          </div>
          <div class="content">
              <h2>企业提升数字化系统</h2>
              <p>Enterprise upgrade digital system</p>
              <div class="form">
                <div class="formTitle">
                    {{state.formType==1 ? '账号登录' : state.formType==2 ? '注册账号' : '重置密码'}}
                </div>
                <el-form :model="dataForm" :rules="dataRule" ref="dataFormRef" @keyup.enter="dataFormSubmitHandle()" status-icon>
                  <el-form-item prop="username">
                    <el-input style="height:50px;" v-model="dataForm.username" :placeholder="state.formType==1 ? '请输入账号' : state.formType==2 ? '请设置账号 不限制中英文 ': '请输入重置账号' " autocomplete="new-password">
                      <template #prefix class="el-input__icon">
                        <svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-user"></use></svg>
                      </template >
                    </el-input>
                  </el-form-item>
                  <el-form-item prop="password">
                    <el-input v-model="dataForm.password" type="password" :placeholder="state.formType==1 ? '请输入密码' : state.formType==2 ? '请设置密码': '请输入重置密码' " autocomplete="new-password">
                      <template #prefix class="el-input__icon">
                        <svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-password"></use></svg>
                      </template>
                    </el-input>
                  </el-form-item>
                    <el-form-item>
                      <el-button type="primary" class="loginBtn" @click="dataFormSubmitHandle()" >立即登录</el-button>
                    </el-form-item>
                </el-form>
                <div class="tips">
                    <span v-if="state.formType == 1" @click="state.formType=2">注册</span>
                    <span v-if="state.formType !== 1" @click="state.formType=1">登录</span>
                    <span @click="state.formType=3">/忘记密码？</span>
                </div>

              </div>
         
          </div>
      </div>
  </div>
</template>

<script>
import { useRouter } from 'vue-router'
import { ElMessage , ElLoading} from 'element-plus'
import { useStore } from 'vuex'
import {
  getCurrentInstance,
  reactive,
  ref,
  unref
} from 'vue'
const state = reactive({
    formType: 1,
});
export default {
  data () {
    return {
      captchaPath: '',
      dataForm: {
        username: '',
        password: ''
      },
      checked: false
    }
  },
  computed: {
    dataRule () {
      return {
        username: [
          { required: true, message: '请填写用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请填写密码', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    $route(){
      location.reload()
    }
  },
  setup () {
    const router = useRouter()
    const dataFormRef = ref();
    const ctx = getCurrentInstance();
    const _this = ctx.appContext.config.globalProperties;
    const store = useStore();
    // 表单提交
    const dataFormSubmitHandle = async () => {
      const form = unref(dataFormRef)
      if (!form) {
        return
      }
      try {
        await form.validate()
        await ajaxLogin()

      } catch (err) {
        console.log(err)
      }
    }
    const ajaxLogin =  async() => {
       await _this
        .$request({
          url: "/api/pcLogin/login_in",
          data: dataFormRef.value.model,
        })
        .then((res) => {
          if(res.code == 1){
              localStorage.setItem("token", res.data.token);
              // localStorage.user = JSON.stringify(res.data)
              localStorage.role = res.data.group_id
              localStorage.userInfo = JSON.stringify(res.data)
              ElMessage.success({
                message: '登录成功',
                type: 'success'
              })
              // localStorage.role = 1
              // localStorage.role = 6
              // localStorage.role = 7
              // localStorage.role = 9
              // return
              goPage()

          }else{
            ElMessage.error(res.msg);
          }
        });
    }
    function goPage(){
              // 8 城市写手 7 城市审查 6 城市代理 2 平台写手 1 超管    9写手+审核  10 平台审核端
        let role = localStorage.role
        if (role==8) {
          router.push({name:'myProduction'})
        }else if(role==7){
          router.push({name:'auditList'})
        }else if(role==6){
          router.push({name:'auditList'})
        }else if(role==1){
          router.push({name:'downloadData'})
        }else if (role==9) {
          router.push({name:'myProduction'})
        }
    }
    //获取菜单栏
    // const menuList = () => {
    //   _this
    //     .$request({
    //       url: "/?s=Learn.Admin.AdminRoles",
    //       params: dataFormRef.value.model,
    //     })
    //     .then((res) => {
    //         localStorage.setItem("menuList", JSON.stringify(res.data.admin_roles));
    //     })
    // }
    return {
      dataFormSubmitHandle,
      dataFormRef,
      ajaxLogin,
      goPage,
      state,
    }
  }
}
</script>
<style  lang="scss" scoped>
.aui-wrapper{
    display: grid;
    place-items: center;
    width: 100vw;
    height: 100vh;
    .box{
      // position: absolute;
      background-image: url(~@/assets/img/neiwangsaas/crowd.png);
      background-size: cover;
      // width: 104.61875rem;
      // height: 45.225rem;
      width: 100rem;
      height: 43.75rem;
      display: flex;
      .logo{
        flex: 1;
        padding: 2.625rem 8.8125rem;
        img{
          width: 6.25rem;
        }
      }
      .content{
        flex: 1;
        h2{
          font-size: 2.125rem;
          font-family: Microsoft YaHei;
          color: #457AF7;
        }
        p{
          font-size: 20px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #7A8499;
        }
        .form{
          width: 28.5625rem;
          height: 30.5625rem;
          background: #FFFFFF;
          box-shadow: 2px 3px 40px 0px rgba(44, 61, 94, 0.13);
          border-radius: 30px;
          padding: 2.5rem;
          margin-top: 3.0625rem;
          display: flex;
          flex-direction: column;
          .formTitle{
            font-size: 1.75rem;
            font-family: ZhenyanGB;
            font-weight: 400;
            color: #6C91ED;
            display: flex;
            justify-content: center;
            margin-bottom: 4.5625rem;
          }
          .loginBtn{
            width: 100%;
            background: #6C91ED;
            box-shadow: 0px 2px 6px 0px rgba(110, 132, 179, 0.2);
            border-radius: 8px;
            margin-top: 5.625rem;
          }
          .tips{
            align-self: flex-end;
            span:nth-child(1) {
              color: #2A67FF;
              margin-right: 10px;
            }
            span {
              cursor: pointer;
              color: #999999;
            }
          }
        }
      }

    }
}

</style>
